<span th:fragment="multiple_img">
    <input th:id="${_file_id}" name="files" type="file" multiple/>
    <div th:if="${_file_type=='img'}" th:id="${_file_id+'_list'}">
        <div class="img_div" th:each="img:${_file_list}">
            <img th:src="${img.fileUrl}" th:alt="${img.fileName}" class="rounded" style="height: 50px"/>
            <img th:onclick="[(${_file_id})]_manager.delete(this,[(${img.fileId})])" th:src="@{/img/delete.png}" alt="删除" class="images"/>
        </div>
    </div>
    <ol th:unless="${_file_type=='img'}" th:id="${_file_id+'_list'}">
        <li th:each="img:${_file_list}">
            <a th:src="${img.fileUrl}" class="img-thumbnail" target="_blank">[[${img.fileName}]]</a>
            <a class="btn btn-xs btn-success" th:onclick="[(${_file_id})]_manager.delete(this,[(${img.fileId})])">删除</a>
        </li>
    </ol>
    <script th:inline="javascript">
      let [(${_file_id})]_manager = {
          init: function (_params) {
              let _is_img = [(${_file_type=='img'})];
              // 多图上传
              $("#" + [[${_file_id}]]).fileinput({
                  uploadUrl: ctx + 'system/file/uploads',
                  uploadAsync: false,
                  showBrowse: true,
                  showPreview: false,
                  previewSettings: {
                      // image: {width:'100px',height:'100px'}
                  },
                  uploadExtraData: function (previewId, index) {
                      return _params;
                  }
              }).on('filebatchuploadsuccess', function (event, result, previewId, index) {
                  //console.log(result)
                  var rsp = result.response;
                  if (rsp.code != 0) {
                      $.modal.alertError(rsp.msg)
                      return;
                  }
                  let {data=[]}=rsp;
                  data.forEach((item,index)=>{
                      let {fileId=-1,fileUrl='',fileName=''}=item;
                      [(${_file_id})]_manager.appendUploadImg(_is_img,fileId,fileUrl,fileName);
                  });
              }).on('fileremoved', function (event, id, index) {
                  $("input[name='" + event.currentTarget.id + "']").val('')
              });
          },
          appendUploadImg:function(_is_img,fileId,fileUrl,fileName){
              let _img_html='';
              if (_is_img){
                  _img_html += '<div class="img_div"><img src="' + fileUrl + '" alt="' + fileName + '" class="rounded" style="height:50px"/>';
                  _img_html += '<img onclick="[(${_file_id})]_manager.delete(this,' + fileId + ')"  alt="删除" class="images" src="'+ctx+'img/delete.png'+'"/>';
                  _img_html += '</div>';
              }else{
                  _img_html += '<li><a href="' + fileUrl + '" class="img-thumbnail" target="_blank">' + fileName + '</a>';
                  _img_html += '<a class="btn btn-xs btn-success" onclick="[(${_file_id})]_manager.delete(this,\'' + fileId + '\')">删除</a>';
                  _img_html += '</li>';
              }
              if (_img_html) {
                  $('#' + [[${_file_id+'_list'}]]).append(_img_html);
              }
          },
          delete: function (_tag, id) {
              var url = ctx + 'system/file/remove';
              var data = {"ids": id};
              $.modal.confirm("确认要删除吗？", () => {
                  $.operate.submit(url, "post", "json", data, function (data) {
                      $(_tag).parent().remove();
                  });
              });
          }
      };
    </script>
<style>
    .img_div {
        display: inline-block;
        position: relative;
        margin: 5px 2px;
        z-index: 5;

        cursor: pointer;
        transition: all 0.6s;
    }

    .img_div:hover {
        transform: scale(3.4);
        z-index: 6;
    }

    .images {
        position: absolute;
        right: -2px;
        top: -2px;
        width: 18px;
        height: 18px;
    }
</style>
</span>
